<template>
    <el-aside width="200px">
      <el-menu
          :default-active="activeMenu"
          @select="handleSelect"
      >
        <!-- 回放录像 -->
        <el-sub-menu index="/LaoZu">
          <template #title>
            <el-icon><Document /></el-icon>
            <span v-show="true">回放录像</span>
          </template>
<!--          <el-menu-item index="/monitor/history/2025-04-04-16">-->
<!--            <el-icon><Document /></el-icon>-->
<!--            2025-04-04-16-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="/monitor/history/2025-04-04-17">-->
<!--            <el-icon><Document /></el-icon>-->
<!--            2025-04-04-17-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="/monitor/history/2025-04-04-18">-->
<!--            <el-icon><Document /></el-icon>-->
<!--            2025-04-04-18-->
<!--          </el-menu-item>-->
          <el-menu-item v-for="time in timeList" :key="time" :index="`/monitor/history/${time}`">
            <el-icon><VideoCameraFilled /></el-icon>
            {{ time }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
</template>

<script lang="ts" setup>
// Element Plus 图标
import { ElMenu, ElMenuItem, ElIcon } from 'element-plus';
import { Document, VideoCameraFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { computed, onMounted, ref } from "vue";
import axios from 'axios';

const router = useRouter();
const route = useRoute();

// 当前激活菜单
const activeMenu = computed(() => route.path);

// 菜单点击跳转
const handleSelect = (index: string) => {
  router.push(index);
};

console.log(route.params.time);

const timeList = ref([]);
//const timeList = ref(['2025-04-04-16', '2025-04-04-17', '2025-04-04-18']);
const fetchTimeList = async () => {
  try {
    // 替换为实际的网络接口地址
    const response = await axios.get('http://172.16.76.2:9094/timevideolist');
    // 假设接口返回的数据格式为 { times: ['2025-04-04-16', '2025-04-04-17', '2025-04-04-18'] }
    timeList.value = response.data.times;
  } catch (error) {
    console.error('获取时间列表失败:', error);
  }
};

onMounted(() => {
  fetchTimeList();
});

</script>
